<template>
  <div class="personnelAdd">
    <el-breadcrumb separator="/" class="ml_5">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="lh lh-seller fw_100"></i>
      </el-breadcrumb-item>
      <el-breadcrumb-item>灵工学院</el-breadcrumb-item>
      <el-breadcrumb-item>编辑分类</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="content_Box box-shadow mt_15 px_10">
      <h4 class="border-bottom pb_10 mb_20">编辑分类</h4>
      <el-form label-width="100px" class="mw_400">
        <el-form-item label="应用" :required="true">
          <el-select class="w_100p" v-model="channel" placeholder="请选择">
            <el-option
              v-for="item in channelList"
              :key="item.channel"
              :label="item.name"
              :value="item.channel"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类别" :required="true">
          <el-input v-model="name"></el-input>
        </el-form-item>
        <el-form-item label="封面图" :required="true">
          <uploadedit
            pic_name="'cover_image'"
            :pic_url="cover_image"
            @func="img5"
          ></uploadedit>
        </el-form-item>
        <el-form-item label="排序" :required="true">
          <el-input v-model="sorts"></el-input>
        </el-form-item>
        <el-form-item label="概要说明">
          <el-input
            type="textarea"
            :rows="8"
            :cols="44"
            placeholder=""
            v-model="describe"
          ></el-input>
        </el-form-item>

        <el-form-item class="my_20">
          <el-button round type="success" @click="submitBtn">提交</el-button>
          <el-button round @click="back">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
var common = require("../../../static/tool.js");
import { appChannelGetlist } from '@/api/banner'

export default {
  name: "HelpAdd",
  data() {
    return {
      url: common.url,
      name: "",
      cover_image: "",
      sorts: "",
      describe: "",
      channelList: [],
      channel: ''
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    // 获取应用分类
    async getChannel() {
      try {
        const res = await appChannelGetlist()
        this.channelList = res.list
      } catch (error) {
        console.log('error', error)
      }
    },
    getInfo() {
      this.getChannel()

      let fn = new FormData();
      fn.append("sn", this.$route.query.sn); //sn
      this.$http.post(this.url + "/course_category/getInfo", fn).then(
        (res) => {
          if (
            res.data.msg == "操作成功！" ||
            res.data.code == "200"
          ) {
            this.name = res.data.data.name;
            this.cover_image = res.data.data.cover_image;
            this.sorts = res.data.data.sort;
            this.describe = res.data.data.describe;
            this.channel = res.data.data.channel
          } else if (res.data.code == "8886") {
            //code   8886  登录过期
            sessionStorage.clear();
            this.$alert("登录已过期，请重新登录 !", "提示", {
              confirmButtonText: "确定",
              callback: (action) => {
                window.location = "login.html";
              },
            });
            return;
          } else {
            this.$message.error(res.data.msg);
            return;
          }
        },
        (res) => {
          this.$message.error("网络错误！");
          return;
        }
      );
    },
    submitBtn() {
      // 新增的接口
      if (
        this.name == "" ||
        this.cover_image == "" ||
        this.sorts == ""
      ) {
        this.$message.error("请填写必填项");
        return;
      }
      let fn = new FormData();
      fn.append("sn", this.$route.query.sn);
      fn.append("name", this.name);
      fn.append("cover_image", this.cover_image);
      fn.append("sort", this.sorts);
      fn.append("describe", this.describe);
      fn.append("channel", this.channel);

      this.$http.post(this.url + "/course_category/setInfo", fn).then(
        (res) => {
          if (
            res.data.msg == "操作成功！" ||
            res.data.code == "200"
          ) {
            this.$message.success(res.data.msg);
            this.back();
          } else if (res.data.code == "8886") {
            //code   8886  登录过期
            sessionStorage.clear();
            this.$alert("登录已过期，请重新登录 !", "提示", {
              confirmButtonText: "确定",
              callback: (action) => {
                window.location = "login.html";
              },
            });
            return;
          } else {
            this.$message.error(res.data.msg);
            return;
          }
        },
        (res) => {
          this.$message.error("网络错误！");
          return;
        }
      );
    },
    back() {
      //返回
      this.$router.go(-1);
    },
    img5(data) {
      // console.log(data);
      this.cover_image = data;
    },
  }
};
</script>

<style scoped>
.row-info {
  padding: 10px 0;
}
.resetBtn,
.btnOK {
  padding: 0 30px;
}
.title-key {
  width: 100px;
}
.list-cont img {
  width: 128px;
}
</style>



// WEBPACK FOOTER //
// src/components/typelist/TypeEdit.vue